import 'package:flutter/material.dart';

class ButtonPage extends StatefulWidget {
  ButtonPage({Key key}) : super(key: key);

  @override
  _ButtonPageState createState() => _ButtonPageState();
}

class _ButtonPageState extends State<ButtonPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('按钮演示页面'), 
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.settings), 
            onPressed: () {

            }
          )
        ],
      ), 
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('普通按钮'),
                onPressed: (){
                  print('普通按钮');
                }
              ),
              SizedBox(width: 5),
              RaisedButton(
                child: Text('颜色按钮'),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: (){
                  print('颜色按钮');
                }
              ),
              SizedBox(width: 5),
              RaisedButton(
                child: Text('阴影按钮'),
                color: Colors.blue, 
                textColor: Colors.white,
                elevation: 10,
                onPressed: (){
                  print('阴影按钮');
                }
              ),
              SizedBox(width: 5),
              RaisedButton.icon(
                icon: Icon(Icons.search), 
                label: Text('图标按钮'),
                color: Colors.pink,
                textColor: Colors.white,
                onPressed: () {
                  print('图标按钮');
                }
              )
            ], 
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 50,
                width: 400, 
                child: RaisedButton(
                  child: Text('宽高按钮'),
                  color: Colors.green,
                  textColor: Colors.white,
                  elevation: 20,
                  onPressed: (){
                    print('宽高按钮');
                  }
                ),
              )
            ], 
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Container(
                  height: 50,
                  margin: EdgeInsets.all(10),
                  child:  RaisedButton(
                    child: Text('自适应按钮'),
                    color: Colors.orange,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: (){
                      print('自适应按钮');
                    }
                  ), 
                )
              )
            ], 
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('圆角按钮'),
                color: Colors.brown,
                textColor: Colors.white,
                elevation: 20,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)
                ),
                onPressed: (){
                  print('圆角按钮');
                }
              ),
              SizedBox(width: 10),
              Container(
                height: 100,
                child: RaisedButton(
                  child: Text('圆行按钮'),
                  color: Colors.deepOrange,
                  textColor: Colors.white,
                  elevation: 20,
                  splashColor: Colors.grey,
                  shape: CircleBorder(
                    side: BorderSide(
                      color: Colors.white 
                    ) 
                  ),
                  onPressed: (){
                    print('圆行按钮');
                  }
                ), 
              ),
              SizedBox(width: 10),
              FlatButton(
                child: Text('FlatButton'),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: (){
                  print('FlatButton');
                }
              )
            ], 
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Container(
                  margin: EdgeInsets.all(20),
                  height: 50,
                  child: OutlineButton(
                    child: Text('OutlineButton'),
                    // color: Colors.red, //没有效果
                    // textColor: Colors.red,
                    onPressed: () {
                      print('OutlineButton');
                    }
                  )
                )
              )
            ], 
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              ButtonBar(
                children: <Widget>[
                  RaisedButton(
                    child: Text('登录'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    onPressed: (){
                      print('登录');
                    }
                  ),
                  RaisedButton(
                    child: Text('注册'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    onPressed: (){
                      print('注册');
                    }
                  ),
                  MyButton(text:'自定义按钮', height: 50, width: 100, pressed: (){
                    print('自定义按钮');
                  },)
                ],
              )
            ], 
          )
        ], 
      ),
    );
  }
}

//自定义按钮组件
class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final double height;
  final double width;
  const MyButton({this.text='', this.pressed=null, this.height=30, this.width=80});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(
        child: Text(this.text),
        onPressed: this.pressed
      ), 
    );
  }
}
